<template>
 <div class="wraple">
    <swiper :options="swiperOption" v-if="showswiper">
    <swiper-slide v-for="item in headerswiper" :key="item.id"><img  class="swiper-img" :src="item.imgurl"/>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
    name:"HomeSwiper",
    props:['headerswiper'],
    data () {
        return {
            swiperOption: {
                pagination:'.swiper-pagination',
                loop:true
            },
        }
    },
    computed:{
        showswiper () {
            return this.headerswiper.length
        }
    }
}
</script>
<style lang="stylus" scoped>
.wraple >>> .swiper-pagination-bullet-active
 background: #fff
.wraple
  overflow:hidden
  width:100%
  height:0
  padding-bottom:35%
  .swiper-img
    width:100%
    



</style>

